<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script type="text/javascript">
    let data = {
        name: "abc",
        address: "深圳"
    }
    // 有问题的写法
    /*let temp = data.name;
    setInterval(() => {
        if (data.name !== temp) {
            temp = data.name;
            console.log("改了");
        }
    }, 100);*/
    // 有问题的写法
    /*Object.defineProperty(data, 'name', {
        get() {
            return data.name;
        },
        set(val) {
            data.name = val;
        }
    });*/
    
    function Observer(obj) {
        // 汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj);
        keys.forEach((k) => {
            Object.defineProperty(this, k, {
                get() {
                    return obj[k];
                },
                set(val) {
                    obj[k] = val;
                }
            });
        })
    }

    const obs = new Observer(data);
    // console.log(obs);

    let vm = {};
    vm._data = data = obs;
    console.log(vm);
</script>
</html>